<template>
	<view class="container">
		<view class="report-item" v-for="(item,index) in listData" :key="item.id">
			<view class="row flex-x-bet-y-center">
				<view class="flex-y-center">
					<text class="title">用户类型：</text>
					<text>{{item.isFirm == 1 ? '企业' : '个人'}}</text>
				</view>
				<text class="status" :class="{'status-green': status == 3, 'status-red': status == 2}">{{item.status | statusText}}</text>
			</view>
			<view class="row">
				<text class="title">用户名称：</text>
				<text>{{item.memberName}} </text>
			</view>
			<view class="row">
				<text class="title">举报类型：</text>
				<text>{{item.reportType}} </text>
			</view>
			<view class="row">
				<text class="title">补充说明：</text>
				<text>{{ item.reportContent }}</text>
			</view>
		</view>
		
		<u-loadmore :status="loadingStatus" font-size="28" icon-size="30"></u-loadmore>
	</view>
</template>

<script>
	import { reportList } from '@/api/common.js'
	export default {
		data() {
			return {
				listData: [],
				total: 0,
				queryParams:{
					pageNo: 1,
					pageSize: 10
				},
				loadingStatus: 'loading'
			}
		},
		onLoad(){
			this.reportList()
		},
		onReachBottom(){
			if(this.total > this.listData.length){
				this.queryParams.pageNo++
				this.reportList()
			}
		},
		filters:{
			statusText(val){
				let map = {
					1: '待审核',
					2: '确认违规 ',
					3: '确认未违规'
				}
				return map[val]
			}
		},
		methods: {
			reportList(){
				this.loadingStatus = 'loading'
				reportList(this.queryParams).then(res => {
					this.listData.push(...res.result.records)
					this.total = res.result.total
					this.loadingStatus = this.total > this.listData.length ? 'loadmore' : 'nomore'
				})
			}
		}
	}
</script>

<style lang="scss">
	.report-item {
		background: #FFFFFF;
		border-radius: 19rpx;
		padding: 20rpx 30rpx;
		margin: 30rpx;
		font-weight: 500;
		font-size: 31rpx;
		color: #333;

		.row {
			padding: 14rpx 0;

			.title {
				color: #808080;
			}

			.status {
				font-weight: 500;
				font-size: 27rpx;
				color: #FE5A13;
			}

			.status-green {
				color: #42BE55;
			}

			.status-red {
				color: #F42D1F;
			}
		}
	}
</style>